<template>
  <border
    class="overall-of-the-park"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :organType="organType"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content" slot="module-content">
      <octagon
       v-for="(item, index) in octagon"
       :key="index"
       :iconSrc="item.iconSrc"
       :octagonImg="item.octagonImg"
       :octagonName="item.octagonName"
       :octagonNumber="octagonMessage[index]"
       :octagonUnit="item.octagonUnit"></octagon>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import Octagon from './../components/Octagon.vue'
export default {
  name: 'overallOfThePark',
  components: {
    Border,
    Octagon
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '园区概况',
        goPageUrl: ''
      },
      octagonMessage: [0, 0, 0, 0, 0, 0],
      octagon: [
        {
          iconSrc: require('./../../assets/images/module/icon/entering-people.png'),
          octagonImg: require('./../../assets/images/module/background/background-2-3.png'),
          octagonName: '入园人数',
          octagonNumber: '',
          octagonUnit: '人'
        },
        {
          iconSrc: require('./../../assets/images/module/icon/entering-car.png'),
          octagonImg: require('./../../assets/images/module/background/background-2-3.png'),
          octagonName: '入园车辆数',
          octagonNumber: '',
          octagonUnit: '辆'
        },
        {
          iconSrc: require('./../../assets/images/module/icon/alarm-people.png'),
          octagonImg: require('./../../assets/images/module/background/background-2-3.png'),
          octagonName: '重点人员告警总数',
          octagonNumber: '600',
          octagonUnit: '个'
        },
        {
          iconSrc: require('./../../assets/images/module/icon/alarm-perimeter.png'),
          octagonImg: require('./../../assets/images/module/background/background-2-3.png'),
          octagonName: '周界告警总数',
          octagonNumber: '',
          octagonUnit: '个'
        },
        {
          iconSrc: require('./../../assets/images/module/icon/online-equipment.png'),
          octagonImg: require('./../../assets/images/module/background/background-2-3.png'),
          octagonName: '设备在线率',
          octagonNumber: '',
          octagonUnit: '%'
        },
        {
          iconSrc: require('./../../assets/images/module/icon/offline-equipment.png'),
          octagonImg: require('./../../assets/images/module/background/background-2-3.png'),
          octagonName: '设备离线数',
          octagonNumber: '',
          octagonUnit: '个'
        }
      ],
      refreshInterval: 0
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    },
    organType () {
      return this.$store.state.moduleList[27].organType
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    // 获取数据
    getData (type, refreshInterval) {
      if (type === 'init') {
        this.wisdomParkApi.summary({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            let data = res.data.data
            this.octagonMessage = [data.personCount, data.carsCount, data.personWarnningCount, data.deviceWarnningCount,
              data.deviceOnlineRate, data.deviceofflineCount]
          } else {
            this.showTips('请求失败，点击确认继续刷新')
            this.octagonMessage = [0, 0, 0, 0, 0, 0]
          }
        }, res => {
          this.showTips('请求失败，点击确认继续刷新')
          this.octagonMessage = [0, 0, 0, 0, 0, 0]
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      }
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.overallOfTheParkTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.overallOfTheParkTimer = setInterval(() => {
          this.getData('init')
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.overallOfTheParkTimer)
  }
}
</script>
<style lang="scss" scoped>
.overall-of-the-park {
  .module-content {
    width: calc(100% - 16.88%);
    margin-left: 8.44%;
    .octagon {
      width: 156px;
      // width: calc((100% - 10px) /2 );
      margin-top: 3px;
      &:nth-of-type(even) {
        float: right;
      }
      & /deep/ .octagon-icon-img {
        width: 34px;
        padding: 0 5px;
        display: flex;
        align-items: center;
      }
      & /deep/ .octagon-message{
        width: calc(100% - 44px);
      }
    }
  }
}
@media screen and (min-width: 1890px) {
  .overall-of-the-park {
    .module-content {
      .octagon {
        width: 186px;
        margin-top: 5px;
        &:nth-of-type(even) {
          float: right;
        }
        & /deep/ .octagon-icon-img {
          width: 42px;
          padding: 0 5px;
          display: flex;
          align-items: center;
        }
        & /deep/ .octagon-message{
          width: calc(100% - 52px);
        }
      }
    }
  }
}
</style>
